<template>
	<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
		<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
			<swiper-item v-for="(item, index) in noticeList" :key="index">
				<view class="swiper-item" @click="clickBannerItem(item)">
					<image :src="item.imgs" mode="aspectFill" :draggable="false" />
				</view>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
</template>

<script>
	import { listNotice } from "@/api/system/notice.js"
	
	import config from '@/config'
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				noticeList: [],
				data: [{
						image: '/static/images/banner/banner01.jpg'
					},
					{
						image: '/static/images/banner/banner02.jpg'
					},
					{
						image: '/static/images/banner/banner03.jpg'
					}
				]
			}
		},
		onLoad() {			
			listNotice({
				pageSize: 5,
				pageNum: 1,
				orderByColumn: 'notice_id',
				isAsc: 'DESC',
			}).then(response=>{
				for(let i=0;i<response.rows.length;i++){
					let notice = response.rows[i];
					if(!notice.imgs){
						notice.imgs = '/static/images/banner/banner03.jpg';
					}else{
						let imgs = notice.imgs.split(',');
						notice.imgs = baseUrl + [0];
					}
					this.noticeList.push(notice);
				}
			})
		},
		methods: {
			clickBannerItem(item) {
				this.$tab.navigateTo(`/pages/common/textview/index?title=${item.noticeTitle}&content=${item.noticeContent}`)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			}			
		}
	}
</script>

<style lang="scss" scoped>	
.image_content {
	width: 100%;
	height: 370rpx;
	.swiperBox {
		width: 100%;
		height: 100%;
		z-index: 99;
	}
}
</style>